<!--
 * @Author: CNN 969682281@qq.com
 * @Date: 2023-03-07 13:36:39
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-10-31 11:11:01
 * @FilePath: \newMould_BHZ\src\views\WaterManage\trends\instantly.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 水稳----动态监控---实时监控 -->
  <div class="department" id="department">
    <!-- 右侧 -->
    <div class="department_right">
      <div class="app-container-btn">
        <el-button @click="goBack">返回</el-button>
      </div>
      <!-- 表格 -->
      <div class="text_table TensionRealTime">
        <div
          class="dialogBody common table_detail"
         
        >
          <div class="app-container-area-title">
            <span class="app-container-area-title-divider"></span>
            <span>基本信息</span>
          </div>
          <div>
            <publicForm
              ref="publicForm"
              lableWidth="95px"
              :formObj="formObj"
              :formData="formData"
            >
            </publicForm>
          </div>
          <div class="app-container-area-title">
            <span class="app-container-area-title-divider"></span>
            <span>材料用量</span>
          </div>
          <div style="margin-top: 8px;height:160px" class="levelClass materialClass">
            <tableData
              :config="material_config"
              :dataList="materialData"
              statusType="3"
              :level="level"
              :earlyWarning="earlyWarning"
              :currentRow="false"
              :stripe="false"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TableData from "@/components/waterManage/public/el-tables"; //主页面列表
import publicForm from "@/components/public/el-form.vue"; //弹框form
import actions from "@/actions";
import formJs from "./regexDetail.js"; //新增弹框配置项

import {
  getUserCompanyTreeList, //左侧机构树接口
  getWaterInfoLists, //主页面列表接口
  getWaterInfoByFid, //主页面列表详情接口
  getStationmachineList, //拌合站列表
  getMachineListByStationId, //拌合机
  getStationmachineByfMachineid, //查询-拌合站信息-详情接口
} from "@/api/request.js";
import { statusTypes } from "@/utils/config"; //配置项
export default {
  name: "waterInstantlyDetail",
  components: {
    TableData, //主页面列表
    publicForm, //弹框表格
  },
  data() {
    return {
      name: "waterInstantlyDetail", //按钮配置页面代号
      rowInfo: null, //当前行信息
      formObj: formJs.formObj, //新增编辑配置参数
      formData: {}, //新增编辑向后台传递对象
      xlsxName: null,
      tableData: [], //表格列表数据列表
      tableDatas: [], //导出所有数据
      level: [],
      earlyWarning: [], //预警标准
      material_config: formJs.material_config, //材料配置项
      materialData: [], //材料用量列表


      fId: null, //点击当前列表数据fId
      listLoading: false, //列表数据加载loading
     

    
      checkData: [],
      userInfo: {}, //登录用户
      treeText: {
        //树状图参数
        companyId: null,
        text: null,
        userId: null,
      },
    };
  },

  mounted() {
    // actions.onGlobalStateChange((state, prev) => {
    //   this.userInfo = prev.currentUser;
    //   this.token = prev.token;
    //   var data = prev.currentUser.projects;
    //   this.projectsObj = [
    //     {
    //       fItemName: "所有项目",
    //       fItemValue: "",
    //     },
    //   ];
    //   data.map((item) => {
    //     this.projectsObj.push({
    //       fItemName: item.projectName,
    //       fItemValue: item.projectId,
    //     });
    //   });
    // }, true);

    this.yj_viewForm(JSON.parse(this.$route.query.data));
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    // 点击当前行
    rowChange(val) {
      this.fId = row.fId;
    },
    // 获取骨料名
    getGlName(data) {
      getStationmachineByfMachineid({ machineId: data })
        .then((res1) => {
          if (res1.errcode == 0) {
            this.material_config.thead[3].label =
              res1.data.yjQmpMsStationmachine.fParm1;
            this.material_config.thead[4].label =
              res1.data.yjQmpMsStationmachine.fParm2;
            this.material_config.thead[5].label =
              res1.data.yjQmpMsStationmachine.fParm3;
            this.material_config.thead[6].label =
              res1.data.yjQmpMsStationmachine.fParm4;
            this.material_config.thead[7].label =
              res1.data.yjQmpMsStationmachine.fParm5;
            this.material_config.thead[8].label =
              res1.data.yjQmpMsStationmachine.fParm6;
          } else {
            this.$message.error("获取骨料名", res1.msg);
          }
        })
        .catch((error) => {
          console.log("获取骨料名接口报错", error.msg);
        });
    },
    // 查看
    yj_viewForm(row) {
      console.log("row", row);

      var id = row.fId;
      this.fPhotofilelist = [];
      if (id != "" && id != null) {
        getWaterInfoByFid({
          fId: id,
          companyId: this.$route.query.fCompanyid,
        })
          .then((res) => {
            if (res.errcode == 0) {
              var that = this;

              that.formData = res.data;
              that.getGlName(res.data.fMachineid);
              this.materialData = [
                {
                  // fCement2deviatevalue
                  name: "实际称量值(t)",
                  cement1: res.data.fCement1actualweighingvalue,
                  cement2: res.data.fCement2actualweighingvalue,
                  aggregate1: res.data.fAggregate1actualweighingvalue,
                  aggregate2: res.data.fAggregate2actualweighingvalue,
                  aggregate3: res.data.fAggregate3actualweighingvalue,
                  aggregate4: res.data.fAggregate4actualweighingvalue,
                  aggregate5: res.data.fAggregate5actualweighingvalue,
                  aggregate6: res.data.fAggregate6actualweighingvalue,
                  water: res.data.fWateractualweighingvalue,

                  // cement3: "",
                },
                {
                  name: "设定比例(%)",
                  cement1: res.data.fCement1designratio,
                  cement2: res.data.fCement2designratio,
                  aggregate1: res.data.fAggregate1designratio,
                  aggregate2: res.data.fAggregate2designratio,
                  aggregate3: res.data.fAggregate3designratio,
                  aggregate4: res.data.fAggregate4designratio,
                  aggregate5: res.data.fAggregate5designratio,
                  aggregate6: res.data.fAggregate6designratio,
                  water: res.data.fWaterdesignratio,
                },
                {
                  name: "实际比例(%)",
                  cement1: res.data.fCement1actualratio, //水泥1
                  cement2: res.data.fCement2actualratio, //水泥2
                  aggregate1: res.data.fAggregate1actualratio, //骨料1
                  aggregate2: res.data.fAggregate2actualratio, //骨料2
                  aggregate3: res.data.fAggregate3actualratio, //骨料3
                  aggregate4: res.data.fAggregate4actualratio, //骨料4
                  aggregate5: res.data.fAggregate5actualratio, //骨料5
                  aggregate6: res.data.fAggregate6actualratio, //骨料6
                  water: res.data.fWateractualratio, //水
                },
                {
                  name: "偏差(%)",
                  cement1: res.data.fCement1deviatevalue, //水泥1
                  cement2: res.data.fCement2deviatevalue, //水泥2
                  aggregate1: res.data.fAggregate1deviatevalue, //骨料1
                  aggregate2: res.data.fAggregate2deviatevalue, //骨料2
                  aggregate3: res.data.fAggregate3deviatevalue, //骨料3
                  aggregate4: res.data.fAggregate4deviatevalue, //骨料4
                  aggregate5: res.data.fAggregate5deviatevalue, //骨料5
                  aggregate6: res.data.fAggregate6deviatevalue, //骨料6
                  water: res.data.fWaterdeviatevalue, //水
                },
                {
                  name: "预警范围值",
                  show: true,
                  cement1: res.data.fCement1warninginfo, //水泥1
                  cement2: res.data.fCement2warninginfo, //水泥2
                  aggregate1: res.data.fAggregate1warninginfo, //骨料1
                  aggregate2: res.data.fAggregate2warninginfo, //骨料2
                  aggregate3: res.data.fAggregate3warninginfo, //骨料3
                  aggregate4: res.data.fAggregate4warninginfo, //骨料4
                  aggregate5: res.data.fAggregate5warninginfo, //骨料5
                  aggregate6: res.data.fAggregate6warninginfo, //骨料5
                  water: res.data.fWaterwarninginfo, //水
                },
              ];
              this.level = [
                "",
                res.data.fCement1warninglevel,
                res.data.fCement2warninglevel,
                res.data.fAggregate1warninglevel,
                res.data.fAggregate2warninglevel,
                res.data.fAggregate3warninglevel,
                res.data.fAggregate4warninglevel,
                res.data.fAggregate5warninglevel,
                res.data.fAggregate6warninglevel,
                res.data.fWaterwarninglevel,
              ];
              this.earlyWarning = [
                "",
                res.data.fCement1warninginfo,
                res.data.fCement2warninginfo,
                res.data.fAggregate1warninginfo,
                res.data.fAggregate2warninginfo,
                res.data.fAggregate3warninginfo,
                res.data.fAggregate4warninginfo,
                res.data.fAggregate5warninginfo,
                res.data.fAggregate6warninginfo,
                res.data.fWaterwarninginfo,
              ];
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((error) => {
            this.$message.error(error.msg);
          });
      } else {
        return this.$message.error("请先选择需要查看的数据");
      }
    },
    // 多选方法
    selectionChange() {},
    // 排序方法
    sortChange() {},
  },
};
</script>

<style scoped>
.TensionRealTime {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.printTables {
  background: #fff;
  display: flex;
  justify-content: end;
  padding: 5px;
  margin-top: 10px;
}

.dialogBody {
  padding: 3px 20px;
  height: 80%;
  overflow-y: auto;
}

.baseTitle {
  border-bottom: 1px solid #0c204d;
  height: 30px;
  line-height: 30px;
  position: relative;
  padding-left: 15px;
}

.baseTitle::after {
  display: block;
  content: "";
  height: 30px;
  width: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background: #0c204d;
}

.materialClass /deep/.el-table tr:nth-child(5) {
  display: none;
}
</style>
